<template>
  <view class="about-page">
    <view class="about-container">
      <!-- 公司Logo和名称 -->
      <view class="company-header">
        <image src="/static/logo.png" class="company-logo" mode="aspectFit" />
        <view class="company-name">E租贝</view>
        <view class="company-slogan">专业的环保设备租赁平台</view>
      </view>

      <!-- 公司介绍 -->
      <view class="info-section">
        <view class="section-title">公司简介</view>
        <view class="section-content">
          <text class="content-text">
            苏州鼎昌节能环保科技有限公司是一家专注于环保设备租赁的创新型企业。我们致力于为客户提供高品质、高效率的环保设备租赁服务，助力企业实现绿色发展和可持续经营。
          </text>
          <text class="content-text">
            E租贝平台汇聚了各类先进的环保设备，包括MVR蒸发器、废水处理设备、废气处理设备等，为不同行业的客户提供定制化的环保解决方案。
          </text>
        </view>
      </view>

      <!-- 服务优势 -->
      <view class="info-section">
        <view class="section-title">服务优势</view>
        <view class="advantages">
          <view class="advantage-item">
            <view class="advantage-icon">
              <u-icon name="checkmark-circle" size="24" color="#52c41a" />
            </view>
            <view class="advantage-content">
              <text class="advantage-title">设备保障</text>
              <text class="advantage-desc">所有设备均经过严格检测，确保性能稳定可靠</text>
            </view>
          </view>
          
          <view class="advantage-item">
            <view class="advantage-icon">
              <u-icon name="clock" size="24" color="#1890ff" />
            </view>
            <view class="advantage-content">
              <text class="advantage-title">快速响应</text>
              <text class="advantage-desc">24小时内响应，48小时内完成设备交付</text>
            </view>
          </view>
          
          <view class="advantage-item">
            <view class="advantage-icon">
              <u-icon name="account" size="24" color="#fa8c16" />
            </view>
            <view class="advantage-content">
              <text class="advantage-title">专业服务</text>
              <text class="advantage-desc">专业技术团队提供全程技术支持和维护服务</text>
            </view>
          </view>
          
          <view class="advantage-item">
            <view class="advantage-icon">
              <u-icon name="heart" size="24" color="#f5222d" />
            </view>
            <view class="advantage-content">
              <text class="advantage-title">贴心保障</text>
              <text class="advantage-desc">完善的售后服务体系，让您租得放心用得安心</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="info-section">
        <view class="section-title">联系我们</view>
        <view class="contact-info">
          <view class="contact-item" @click="makePhoneCall">
            <view class="contact-icon">
              <u-icon name="phone" size="20" color="#52c41a" />
            </view>
            <view class="contact-content">
              <text class="contact-label">客服电话</text>
              <text class="contact-value">0512-6617 4176</text>
            </view>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
          
          <view class="contact-item" @click="copyEmail">
            <view class="contact-icon">
              <u-icon name="email" size="20" color="#1890ff" />
            </view>
            <view class="contact-content">
              <text class="contact-label">邮箱地址</text>
              <text class="contact-value">cwy@suzdcjn.com</text>
            </view>
            <u-icon name="arrow-right" size="14" color="#ccc" />
          </view>
          
          <view class="contact-item">
            <view class="contact-icon">
              <u-icon name="home" size="20" color="#722ed1" />
            </view>
            <view class="contact-content">
              <text class="contact-label">公司名称</text>
              <text class="contact-value">苏州鼎昌节能环保科技有限公司</text>
            </view>
          </view>
          
          <view class="contact-item">
            <view class="contact-icon">
              <u-icon name="clock" size="20" color="#fa541c" />
            </view>
            <view class="contact-content">
              <text class="contact-label">工作时间</text>
              <text class="contact-value">周一至周五 9:00-18:00</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 版本信息 -->
      <view class="info-section">
        <view class="section-title">版本信息</view>
        <view class="version-info">
          <view class="version-item">
            <text class="version-label">当前版本</text>
            <text class="version-value">V1.0</text>
          </view>
          <view class="version-item">
            <text class="version-label">更新时间</text>
            <text class="version-value">2025年7月</text>
          </view>
        </view>
      </view>

      <!-- 法律声明 -->
      <view class="legal-section">
        <view class="legal-links">
          <text class="legal-link" @click="goToUserAgreement">用户协议</text>
          <text class="legal-divider">|</text>
          <text class="legal-link" @click="goToPrivacyPolicy">隐私政策</text>
        </view>
        <view class="copyright">
          <text class="copyright-text">© 2025 苏州鼎昌节能环保科技有限公司</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  
  onLoad() {
    uni.setNavigationBarTitle({
      title: '关于我们'
    })
  },
  
  methods: {
    makePhoneCall() {
      uni.makePhoneCall({
        phoneNumber: '0512-6617 4176'
      })
    },
    
    copyEmail() {
      uni.setClipboardData({
        data: 'cwy@suzdcjn.com',
        success: () => {
          uni.showToast({
            title: '邮箱地址已复制',
            icon: 'success'
          })
        }
      })
    },
    
    goToUserAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/user'
      })
    },
    
    goToPrivacyPolicy() {
      uni.navigateTo({
        url: '/pages/agreement/privacy'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.about-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.about-container {
  padding: 32rpx;
}

.company-header {
  background: white;
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  margin-bottom: 32rpx;
}

.company-logo {
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 24rpx;
  display: block;
}

.company-name {
  font-size: 48rpx;
  font-weight: 700;
  color: #333;
  margin-bottom: 16rpx;
}

.company-slogan {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.info-section {
  background: white;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
  overflow: hidden;
}

.section-title {
  padding: 32rpx 32rpx 0;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.section-content {
  padding: 0 32rpx 32rpx;
}

.content-text {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20rpx;
  text-align: justify;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.advantages {
  padding: 0 32rpx 32rpx;
}

.advantage-item {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
  margin-bottom: 32rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.advantage-icon {
  width: 60rpx;
  height: 60rpx;
  background: #f0f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.advantage-content {
  flex: 1;
}

.advantage-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.advantage-desc {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.contact-info {
  padding: 0 32rpx 32rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.contact-icon {
  width: 48rpx;
  height: 48rpx;
  background: #f0f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.contact-label {
  font-size: 24rpx;
  color: #999;
}

.contact-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.version-info {
  padding: 0 32rpx 32rpx;
}

.version-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.version-label {
  font-size: 28rpx;
  color: #666;
}

.version-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.legal-section {
  background: white;
  border-radius: 16rpx;
  padding: 40rpx;
  text-align: center;
}

.legal-links {
  margin-bottom: 24rpx;
}

.legal-link {
  font-size: 26rpx;
  color: #4A90E2;
  text-decoration: underline;
}

.legal-divider {
  margin: 0 16rpx;
  color: #ccc;
}

.copyright {
  padding-top: 24rpx;
  border-top: 1rpx solid #f0f0f0;
}

.copyright-text {
  font-size: 24rpx;
  color: #999;
}
</style>